<template>
  <a-modal
    title="新建项目"
    :width="460"
    :visible="visible"
    :confirmLoading="mloading"
    @ok="onClickOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="mloading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="项目名称">
          <a-input v-decorator="['title', {rules: [{required: true, message: '请输入项目名称'}]}]" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import {
  cleanAdd
} from '@/api/handle'
const fields = ['title']
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      mloading: false,
      form: this.$form.createForm(this)
    }
  },

  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    if (this.model) this.form.setFieldsValue(pick(this.model, fields))
  },

  computed: {
    from () {
      const { from } = this.model || {}
      return from
    }
  },

  methods: {
    onClickOk () {
      this.form.validateFields((errors, values) => {
        if (!errors) {
          this.mloading = true
          const { title } = values || {}
          return cleanAdd({
            title
          }).then((res) => {
            const { msg } = res
            this.$notification['success']({
              message: '提示',
              description: msg,
              duration: 4
            })
            this.$emit('ok')
          }).catch((e) => {
            this.mloading = false
            this.$notification['error']({
              message: '提示',
              description: e.msg,
              duration: 4
            })
          })
        }
      })
    }
  }
}
</script>

<style>

</style>
